<template>
  <div class="total-class">
    <div>
      <span class="demonstration">CCNU Online Judge </span>
    </div>
    <el-button type="primary" style="margin-left: 60%" @click="addQuestion">添加题目</el-button>
    <el-table
      :data="questions"
      border
      style="width: 70%;margin-left: 15%;margin-top: 3vh">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="题目"
        width="250">
        <template slot-scope="scope">
          <div @click="detailData(scope.row)" style="color: #5E1C7A">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="180">
      </el-table-column>
      <el-table-column
          prop="create_time"
          label="创建时间"
          width="240">
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="修改时间">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>
    <!--<div class="block">-->
      <!--<el-pagination-->
        <!--layout="prev, pager, next"-->
        <!--:total="1000">-->
      <!--</el-pagination>-->
    <!--</div>-->
  </div>
</template>

<script>
  import Api from '../common/api';
    export default {
        name: "question-bank",
      data() {
        return {
          questions:[],
          tableData: [{
            id: '1',
            title: 'The A+B Problem',
            author:'admin',
            create: '2022-02-10 12:00:00',
            update: '2022-03-12 12:00:00'
          },
          {
            id: '2',
            title: 'The A+B Problem',
            author:'admin',
            create: '2022-02-10 12:00:00',
            update: '2022-03-12 12:00:00'
          }]
        }
      },
      beforeRouteEnter(to, from, next) {
        next(vm => {
          // console.log(vm);//当前组件的实例
          Api.apiCall('GET','/get_questions').then(resolve=>{
            if (resolve.data.code === 200){
              vm.questions = resolve.data.data;
            }else{
              setTimeout(()=>{
                this.$router.push('/login')
              },3000);
            }
          });
        });
      },
      methods:{
        addQuestion(){
          this.$router.push("/index/addQuestion")
        },
        detailData(row){
          console.log(row,'页面跳转');
          this.$router.push("/index/doQuestionPage?question_id="+row.id)
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        }
      }
    }
</script>

<style scoped>
  .block{
    margin-top: 3vh;
  }
  .total-class{
    margin-top: 5vh;
    font-size: 3vw;
  }
</style>
